<template>
  <div class="ChangeSite">
    <h1 class="mt-10">{{ changeSiteInfo }}</h1>
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="12">
            <v-text-field
              v-model="message"
              outlined
              clearable
              label="Message"
              type="text"
              color="success"
            >
              <template v-slot:prepend>
                <v-tooltip
                  bottom
                >
                  <template v-slot:activator="{ on }">
                    <v-icon v-on="on">mdi-help-circle-outline</v-icon>
                  </template>
                  I'm a tooltip
                </v-tooltip>
              </template>
              <template v-slot:append>
                <v-fade-transition leave-absolute>
                  <v-progress-circular
                    v-if="loading"
                    size="24"
                    color="info"
                    indeterminate
                  ></v-progress-circular>
                  <v-img v-else width="24" height="24" src="https://cdn.vuetifyjs.com/images/logos/v-alt.svg" alt="" />
                </v-fade-transition>
              </template>
              <template v-slot:append-outer>
                  <v-btn id="deviceready" large flat color="primary" @click="speakTtsSpeech" style="top: -8px"><v-icon left>mdi-target</v-icon>Click me</v-btn>
              </template>
            </v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </div>
</template>

<script>
import Speech from 'speak-tts'
// import Vue from 'vue'

export default {
  name: 'ChangeSite',
  data () {
    return {
      changeSiteInfo: '换站信息换站信息',
      message: 'Hey!',
      loading: false,
      speech: null
    }
  },
  created () {
  },
  mounted () {
    this.speechInit()
  },
  methods: {
    clickMe () {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.call()
      }, 2000)
    },
    speechInit () {
      this.speech = new Speech()
      this.speech.setLanguage('zh-CN')
      this.speech.init().then(() => {})
    },
    speakTtsSpeech () {
      this.loading = true
      // this.speech.speak({
      //   text: this.message,
      //   queue: false,
      //   listeners: {
      //     onstart: () => {
      //       console.log('Start utterance')
      //     },
      //     onend: () => {
      //       console.log('End utterance')
      //     },
      //     onresume: () => {
      //       console.log('Resume utterance')
      //     },
      //     onboundary: (event) => {
      //       console.log(event.name + ' boundary reached after ' + event.elapsedTime + ' milliseconds.')
      //     }
      //   }
      // }).then(() => {
      //   this.loading = false
      //   console.log('Success !')
      // }).catch((e) => {
      //   this.loading = false
      //   console.error('An error occurred :', e)
      // })
      this.call()
    },
    call () {
      document.addEventListener('deviceready', () => {
        window.TTS.speak({
          text: this.message,
          identifier: 'com.apple.ttsbundle.Samantha-compact',
          locale: 'zh-CN',
          rete: 1,
          cancel: true
        }, function () {
          console.log('Text success fully spoken')
        }, function (reason) {
          console.log(reason)
        })
      })
      // this.$nextTick(() => {
      //   document.addEventListener('deviceready', onDeviceReady, false)
      //   function onDeviceReady () {
      //     // Cordova is now initialized. Have fun!
      //     console.log('Running cordova-' + Vue.cordova.platformId + '@' + Vue.cordova.version)
      //     document.getElementById('deviceready').classList.add('ready')
      //     Vue.cordova.plugins.TTS.speak({
      //       text: this.message,
      //       locale: 'zh-CN',
      //       rete: 1
      //     }, function () {
      //       console.log('Text success fully spoken')
      //     }, function (reason) {
      //       console.log(reason)
      //     })
      //   }
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.ChangeSite {
  width: 100vw;
  background-color: #3a61a4;
  color: #fff;
  text-align: center;
}
</style>
